/*
 * @Author: jiu yin
 * @Date: 2024-05-07 16:38:09
 * @LastEditTime: 2024-06-13 12:06:08
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_member_code\index.tsx
 * jiu
 */
import { useState, useEffect } from "react";
import "./index.scss";
import { Button, Image } from "antd";
import CodeTable from "./component/CodeTable";
import { useRoute } from "@/hooks";
import { program_detail } from "@/api/home";
import EditScene from "./component/EditScene";
import { DashboardOutlined, UserOutlined } from "@ant-design/icons";
import barcodeIcon from "@/assets/image/barcodeIcon.png";
import barcodeIcon2 from "@/assets/image/barcodeIcon2.png";

export default function index() {
	const { getParams } = useRoute();
	const { program_id } = getParams();

	let [detail, setDetail] = useState<any>({});
	let [is_data, set_is_data] = useState(false);
	useEffect(() => {
		program_detail({ program_id: Number(program_id) }).then((res: any) => {
			setDetail(res.data);
		});
	}, [is_data]);

	let [isModalOpenEdit, setIsModalOpenEdit] = useState(false);
	const EditSceneFn = () => {
		set_is_data(!is_data);
	};

	//扫码枪
	let [isModalOpenScan, SetIsModalOpenScan] = useState(true);
	return (
		<div className="base_bg_fff scene_member_code ">
			<section className="flex">
				<div className="flex justify-between  p-20px bg-#f7f8ff border-rd-10px flex-1">
					<div className="flex">
						<Image width={180} style={{ borderRadius: "5px" }} src={detail.cover_url} />
						<div className="ml-36px font-700 flex flex-col justify-around">
							<h3 className="c-#161940 text-20px">{detail.scene_name}</h3>
							<p className="c-#5C5F7A  mt-5px">{detail.desc}</p>

							<ul className="flex text-14px mt-16px">
								<li className="flex mr-28px">
									<UserOutlined style={{ fontSize: "16px", color: "#9697A9" }} />
									<span className="c-#9697A9 ml-5px">最大成员</span>
									<span className="c-#161940 ml-5px">{detail?.max_num}人</span>
								</li>
								<li className="flex mr-28px">
									<DashboardOutlined style={{ fontSize: "16px", color: "#9697A9" }} />
									<span className="c-#9697A9 ml-5px">体验时长</span>
									<span className="c-#161940 ml-5px">{detail?.exp_duration}min</span>
								</li>
							</ul>
						</div>
					</div>
					<Button danger onClick={() => setIsModalOpenEdit(true)}>
						更换场景
					</Button>
				</div>

				{!isModalOpenScan ? (
					<div
						className="barcodeBg ml-20px h-160px w-405px box-border p-30px  flex items-center cursor-pointer"
						onClick={() => SetIsModalOpenScan(true)}>
						<img src={barcodeIcon} alt="" className="w-120px h-110px" />
						<div className="c-#161940 ml-30px">
							<p className="text-24px font-700">启动扫码枪</p>
							<p className="mt-8px">请分别扫描入场票和设备码</p>
						</div>
					</div>
				) : (
					<div
						className="barcodeBg2 ml-20px h-160px w-405px box-border p-30px  flex items-center cursor-pointer"
						onClick={() => SetIsModalOpenScan(false)}>
						<img src={barcodeIcon2} alt="" className="w-120px h-110px" />
						<div className="c-#161940 ml-30px">
							<p className="text-24px font-700">扫码枪已启动</p>
						</div>
					</div>
				)}
			</section>

			<CodeTable
				program_id={Number(program_id)}
				isModalOpenScan={[isModalOpenScan, SetIsModalOpenScan]}
				detail={detail}></CodeTable>
			{isModalOpenEdit && (
				<EditScene
					type={"edit_scene"}
					isModalOpen={[isModalOpenEdit, setIsModalOpenEdit]}
					edit_data={detail}
					EditSceneFn={EditSceneFn}
				/>
			)}
		</div>
	);
}
